<template>
	<view class="loginPassword">
		<view class="title">
			{{$t('Page.user.dlmm')}}
		</view>
		<view class="main">
			<uni-forms ref="form" :modelValue="formData" label-position="top" label-width="150" :rules="rules">
				<uni-forms-item :label="$t('Page.user.jmm')" name="oldPassword" ref="oldPassword" required>
					<uni-easyinput type="password" v-model="formData.oldPassword"
						@blur="(e)=>$refs.oldPassword.onFieldChange($event.detail.value)"
						:passwordIcon="false"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item :label="$t('Page.user.xmm')" name="newPassword" ref="newPassword" required>
					<uni-easyinput type="password" v-model="formData.newPassword"
						@blur="(e)=>$refs.newPassword.onFieldChange($event.detail.value)"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item :label="$t('Page.user.qrmm')" name="confirmNewPassword" ref="confirmNewPassword"
					required>
					<uni-easyinput type="password" v-model="formData.confirmNewPassword"
						@blur="(e)=>$refs.confirmNewPassword.onFieldChange($event.detail.value)"></uni-easyinput>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="bottom">
			<waves class="saveBtn" @onTap="submit">{{$t('Page.user.bz')}}</waves>
		</view>
	</view>
</template>

<script>
	import {
		sendMessage
	} from '@/api/websocket.js'
	import {
		mapState,
	} from 'vuex'
	export default {
		data() {
			return {
				// 表单数据
				formData: {
					oldPassword: '',
					newPassword: '',
					confirmNewPassword: '',
				},
				rules: {
					oldPassword: {
						rules: [{
							required: true,
							errorMessage: this.$t('Page.user.lmmwk'),
						}]
					},
					newPassword: {
						rules: [{
							required: true,
							errorMessage: this.$t('Page.user.lmmwk'),
						}, {
							validateFunction: (rule, value, data, callback) => {
								if (value.length < 6) {
									callback(this.$t('Page.user.mmmsbg'))
								} else if (data.newPassword !== data.confirmNewPassword) {
									callback(this.$t('Page.user.lcmmbyz'))
								}
								if ((data.newPassword && data.confirmNewPassword) && data.newPassword === data
									.confirmNewPassword) {
									this.$refs.confirmNewPassword.onFieldChange(data.confirmNewPassword)
								}
								return true
							}
						}]
					},
					confirmNewPassword: {
						rules: [{
							required: true,
							errorMessage: 'Password can not be blank',
						}, {
							validateFunction: (rule, value, data, callback) => {
								if (value.length < 6) {
									callback(this.$t('Page.user.mmmsbg'))
								} else if (data.newPassword !== data.confirmNewPassword) {
									callback(this.$t('Page.user.lcmmbyz'))
								}
								if ((data.newPassword && data.confirmNewPassword) && data.newPassword === data
									.confirmNewPassword) {
									this.$refs.newPassword.onFieldChange(data.newPassword)
								}
								return true
							}
						}]
					}
				}
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.app.userInfo,
			}),
		},
		methods: {
			submit() {
				this.$refs.form.validate().then(res => {
					this.changePassword()
				}).catch(err => {})
			},
			changePassword() {
				const {
					FORGET
				} = this.$api
				sendMessage({
					flag: FORGET,
					content: {
						username: this.userInfo.username,
						password: this.formData.oldPassword,
						newpassword: this.formData.confirmNewPassword,
					}
				})
				uni.$once(FORGET, (res) => {
					const {
						msg,
						code,
						data
					} = res
					uni.showToast({
						title: msg,
						icon: 'none'
					})
				})
			}
		},
	}
</script>

<style lang="less" scoped>
	.loginPassword {
		border: 1px solid #2b333b;
		border-radius: 0.5rem;
		margin-top: 8px;
		margin-bottom: 8px;
		padding-top: 16px;

		.title {
			font-weight: 900;
			margin-left: 24px;
			margin-right: 24px;
			border-bottom: 1px solid #2b333b;
			padding-bottom: 8px;
		}

		.main {
			font-size: 14px;
			font-weight: 700;
			padding-left: 24px;
			padding-right: 24px;
			margin-top: 8px;
			margin-bottom: 8px;
			color: #adadc2;


			.uni-forms-item {
				width: 80%;
			}

			/deep/.uni-easyinput__content {
				color: #fff !important;
				border: 2px solid transparent !important;
				background: #2b333b !important;

				&:hover {
					border: 2px solid #000 !important;
				}
			}

			/deep/.is-focused {
				border: 2px solid #557086 !important;
			}

		}

		.bottom {
			border-top: 1px solid #2b333b;
			display: flex;
			justify-content: flex-end;
			padding-left: 16px;
			padding-right: 16px;
			padding-top: 8px;
			padding-bottom: 8px;

			.saveBtn {
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 3px;
				color: #fff;
				background: #33c38f;
				padding: 0 36px;
			}
		}
	}
</style>